<template>
<div class="app-container calendar-list-container">
  <div class="content-container">
       <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item name="1">
                <template slot="title">
                  <span style="font-size:17px">订单详情</span>
                </template>

                <el-form  label-width="120px">
                  <div style="width:100%;display:flex">
                        <el-form-item label="订单编号:" style="flex:1">
                          <span style="color:#303133">    {{item.demand.orderNo || ""}}    </span>
                          </el-form-item>
                        <el-form-item label="订单创建日期:" style="flex:1">
                          <span style="color:#303133">   {{item.demand.createTime}}</span>
                          </el-form-item>
                        <el-form-item label="" style="flex:1">
                          </el-form-item>
                  </div>
                    <div style="width:100%;display:flex">
                        <el-form-item label="客户名:" style="flex:1;color:#909399">
                          <span style="color:#303133">   {{item.demand.name}}    </span>
                          </el-form-item>
                        <el-form-item label="客户电话:" style="flex:1">
                          <span style="color:#303133">  {{item.demand.phone}} </span>
                          </el-form-item>
                        <el-form-item label="客户意向:" style="flex:1">
                          <span style="color:#303133">{{  item.demand.intentLevel == 0 ? '一般' : (item.demand.intentLevel == 1 ? '较强烈' : '强烈')  }}</span>
                        </el-form-item>  
                  </div>
                    <div style="width:100%;display:flex">
                        <el-form-item label="门店:" style="flex:1;color:#909399">
                          <span style="color:#303133">   {{item.demand.name}}    </span>
                          </el-form-item>
                        <el-form-item label="门店电话:" style="flex:1">
                          <span style="color:#303133">  {{item.demand.phone}} </span>
                          </el-form-item>
                        <el-form-item label="" style="flex:1">
                          
                        </el-form-item>  
                  </div>
                  <div>
                    <el-steps :active="item.demand.status" align-center>
                      <el-step :title="orderStepItem.name" :description="''" v-for="(orderStepItem, index) in item.orderStatuses" :key="'step_' + index"></el-step>
                    </el-steps>
                  </div>
                </el-form>  
            </el-collapse-item>
            <el-collapse-item name="2">
                <template slot="title">
                  <span style="font-size:17px">需求描述</span>
                </template>
              <div style="padding: 20px 0">
                  {{item.demand.demand}}
              </div>
              <div>
                <el-row>
                    <el-col :span="6" v-for="(o, index) in item.demandUrls" :key="'demand_pic_' + index" :offset="index > 0 ? 2 : 0">
                      <el-card :body-style="{ padding: '0px' }">
                        <img :src="o" class="image" preview="0" >
                      </el-card>
                    </el-col>
                  </el-row>
              </div>
            </el-collapse-item>
            <el-collapse-item name="3">
                <template slot="title">
                  <span style="font-size:17px">方案图</span>
                </template>
              <div v-if="projectPlanPicsUrls.length">
                <el-row v-for="(projectPlanPics, projectPlanPicsIndex) in projectPlanPicsUrls" :key="'row_plan_pic_' + projectPlanPicsIndex" style="margin: 10px  0 0 0">
                    <el-col :span="6" v-for="(projectPlanPicsItem, index) in projectPlanPics" :key="'demand_pic_' + index" :offset="index > 0 ? 2 : 0">
                      <el-card :body-style="{ padding: '0px' }">
                        <img :src="projectPlanPicsItem.resource" class="image" preview="1" >
                      </el-card>
                    </el-col>
                  </el-row>
              </div>
            </el-collapse-item>
            <el-collapse-item name="4">
                <template slot="title">
                  <span style="font-size:17px">施工完成图</span>
                </template>
              <div v-if="projectPlanDonePicsUrls.length">
                  <el-row v-for="(projectPlanPics, projectPlanPicsIndex) in projectPlanDonePicsUrls" :key="'row_done_plan_pic_' + projectPlanPicsIndex" style="margin: 10px  0 0 0">
                    <el-col :span="6" v-for="(projectPlanPicsItem, index) in projectPlanPics" :key="'demand_done_pic_' + index" :offset="index > 0 ? 2 : 0">
                      <el-card :body-style="{ padding: '0px' }">
                        <img :src="projectPlanPicsItem.resource" class="image" preview="2" >
                      </el-card>
                    </el-col>
                  </el-row>
              </div>
              
            </el-collapse-item>
            <el-collapse-item name="5">
                <template slot="title">
                  <span style="font-size:17px">用户评价</span>
                </template>
                <p style="padding: 20px 0" v-if="item.comment">
                  {{  item.comment.remark}}
                </p>
              <div v-if="item.comment">
                <el-form  label-width="120px">
                        <el-form-item label="综合评价">
                            <el-rate   style="line-height:40px"  disabled v-model="item.comment.comprehensiveStar" show-text :texts='commentDesc'></el-rate>
                          </el-form-item>
                        <el-form-item label="服务态度" >
                          <el-rate style="line-height:40px" disabled v-model="item.comment.serviceStar" show-text  :texts='commentDesc'></el-rate>
                          </el-form-item>
                        <el-form-item label="安装及时" >
                            <el-rate style="line-height:40px" disabled v-model="item.comment.installStar" show-text  :texts='commentDesc'></el-rate>
                        </el-form-item>
                        <el-form-item label="商品质量" >
                            <el-rate style="line-height:40px" disabled v-model="item.comment.qualityStar" show-text  :texts='commentDesc'></el-rate>
                        </el-form-item>
                        <el-form-item label="施工质量" >
                            <el-rate style="line-height:40px" disabled v-model="item.comment.handleStar" show-text  :texts='commentDesc'></el-rate>
                        </el-form-item>
                </el-form>
                  
              </div>
            </el-collapse-item>
            <!-- 交流记录【客户-商家-平台】 -->
            <el-collapse-item name="6">
                <template slot="title">
                  <span style="font-size:17px">沟通记录</span>
                </template>
                <el-row :gutter="8">
                <el-col :xs="{span: 16}" :sm="{span: 16}" :md="{span: 16}" :lg="{span: 16}" :xl="{span: 16}" >
                  <el-table border :data="item.operateLogs" style="width: 100%;padding-top: 15px;">

                    <el-table-column
                      type="index"
                      align="center"
                      width="50">
                    </el-table-column>
                      <el-table-column label="时间" width="200">
                        <template slot-scope="scope">
                          {{scope.row.createTime}}
                        </template>
                      </el-table-column>
                      <el-table-column label="操作内容" align="center">
                        <template slot-scope="scope">
                          {{scope.row.content}}
                        </template>
                      </el-table-column>
                    </el-table>
                </el-col>
              </el-row>
            </el-collapse-item>
            <!-- 回访记录【内部】 -->
            <el-collapse-item name="6">
                <template slot="title">
                  <span style="font-size:17px">回访记录【内部】</span>
                </template>
                <el-row :gutter="8">
                <el-col :xs="{span: 16}" :sm="{span: 16}" :md="{span: 16}" :lg="{span: 16}" :xl="{span: 16}" >
                  <el-table border :data="item.operateLogs" style="width: 100%;padding-top: 15px;">
                    <el-table-column
                      type="index"
                      align="center"
                      width="50">
                    </el-table-column>
                      <el-table-column label="时间" width="200">
                        <template slot-scope="scope">
                          {{scope.row.createTime}}
                        </template>
                      </el-table-column>
                      <el-table-column label="操作内容" align="center">
                        <template slot-scope="scope">
                          {{scope.row.content}}
                        </template>
                      </el-table-column>
                    </el-table>
                </el-col>
              </el-row>
            </el-collapse-item>
            <!-- 操作记录 -->
            <el-collapse-item name="7">
                <template slot="title">
                  <span style="font-size:17px">操作记录</span>
                </template>
               <el-row :gutter="8">
                <el-col :xs="{span: 16}" :sm="{span: 16}" :md="{span: 16}" :lg="{span: 16}" :xl="{span: 16}" >
                  <el-table border :data="item.operateLogs" style="width: 100%;padding-top: 15px;">
                    <el-table-column
                      type="index"
                      align="center"
                      width="50">
                    </el-table-column>
                      <el-table-column label="时间" width="200">
                        <template slot-scope="scope">
                          {{scope.row.createTime}}
                        </template>
                      </el-table-column>
                      <el-table-column label="操作内容" align="center">
                        <template slot-scope="scope">
                          {{scope.row.content}}
                        </template>
                      </el-table-column>
                    </el-table>
                </el-col>
              </el-row>
            </el-collapse-item>
      </el-collapse>
      </div>
    </div>
</template>

<script>
import { searchByKw } from "@/api/user/index";
import { shopList, addOrUpdate } from "@/api/shop/index";
import { mapGetters } from "vuex";
import { getToken } from "@/api/qiniu";
import { itemWithSubLevel, subList } from "@/api/district/index";
import { item } from "@/api/order/index";

export default {
  name: "user",
  data() {
    return {
      commentDesc: ['非常差', '差', '一般', '好', '非常好'],
      item: {
        demand: {
          orderNo: ''
        },
        comment: {
          remark: ''
        }

      },
      projectPlanPicsUrls: [],
      projectPlanDonePicsUrls: [],
      activeNames: ["1", "2", "3", "4", "5", "6"],
      phoneDisable: false,
      imageUrl: "",
      dataObj: { token: "", key: "" },
      operateArray: [
        {
          id: 0,
          name: "直营店"
        },
        {
          id: 1,
          name: "加盟店"
        },
        {
          id: 2,
          name: "协议店"
        }
      ],
      province: "",
      city: "",
      area: "",
      street: "",
      labelPosition: "right",
      formStatus: "create",
      form: {
        username: undefined,
        name: undefined,
        sex: "男",
        password: undefined,
        description: undefined
      },
      rules: {},
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 20
      },
      sexOptions: ["男", "女"],
      dialogFormVisible: false,
      dialogStatus: "",
      userManager_btn_edit: true,
      userManager_btn_del: true,
      userManager_btn_add: true,
      textMap: {
        update: "编辑",
        create: "创建"
      },
      tableKey: 0,
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: [],
      image: "",
      file: "",
      shopInfo: {
        id: null,
        phone: "",
        name: "",
        provinceId: 355,
        cityId: 356,
        areaId: 357,
        streetId: 358,
        slogan: null,
        description: null,
        shopkeeper: "",
        userId: null,
        longtitude: null,
        latitude: null,
        operateType: 0
      }
    };
  },
  created() {
    //加载店铺信息
    this.loadItem();
  },
  computed: {
    ...mapGetters(["elements"])
  },
  methods: {
    loadItem() {
      var id = this.$route.query.id;
      var param = {
        demandId: id
      };
      item(param).then(resp => {
        this.item = resp.data;
        //处理数组
        this.projectPlanPicsUrls = []
        var row = 2
        var col = 3
        for(var idx  = 0;( this.item.projectPlanPicsUrls != null &&(idx * row) <= this.item.projectPlanPicsUrls.length )  &&  idx < row; idx++){
          var arr = []
          for(var idY  = 0;((idY < this.item.projectPlanPicsUrls.length ) &&(3 * idx + idY)  <= this.item.projectPlanPicsUrls.length  )&& idY < col; idY++){
            var  item = this.item.projectPlanPicsUrls[(3 * idx + idY)]
            if(item){
              arr.push(item)
            }
          }
          this.projectPlanPicsUrls.push(arr)
          console.log(this.projectPlanPicsUrls)
        }
        // 处理完成图
        for(var idx  = 0;(this.item.projectDonePicUrls != null && (idx * row) <= this.item.projectDonePicUrls.length )  && idx < row; idx++){
          var arr = []
          for(var idY  = 0; ((idY < this.item.projectDonePicUrls.length ) &&(3 * idx + idY)  <= this.item.projectDonePicUrls.length  )&& idY < col; idY++){
            var  item = this.item.projectDonePicUrls[(3 * idx + idY)]
            if(item){
                arr.push(item)
            } 
          }
          if(arr.length != 0){
             this.projectPlanDonePicsUrls.push(arr) 
          }
        }
        

      });
    },
    handleChange(val) {
      
    },
    onShopKeeperChange(val) {
      console.log(val);
      this.phoneDisable = false;
    },
    querySearchAsync(queryString, cb) {
      searchByKw(queryString).then(res => {
        if (res.data) {
          var arrResult = [];
          res.data.forEach(element => {
            var item = {
              value: element.name,
              key: element.phone
            };
            arrResult.push(item);
          });
          cb(arrResult);
        }
      });
    },
    handleSelect(item) {
      console.log(item);
      if (this.shopInfo.shopkeeper != "") {
        this.phoneDisable = true;
      }
      this.shopInfo.phone = item.key;
    },
    onUploadSuccess(response, file, fileList) {
      this.$nextTick(()=> {
        this.shopInfo.imageUrl =
        "http://p8x2p1gru.bkt.clouddn.com/" + response.key;
      })
    },
    beforeUpload(file) {
      const _self = this;
      return new Promise((resolve, reject) => {
        getToken()
          .then(response => {
            console.log(response);
            const token = response.data;
            _self._data.dataObj.token = token;
            _self._data.dataObj.key = file.name;
            resolve(true);
          })
          .catch(err => {
            console.log(err);
            reject(false);
          });
      });
    },
    loadProvince(id) {
      subList(id).then(response => {
        this.provinceList = response.data;
        var pro = this.provinceList[0];
        this.loadCity(355);
        this.shopInfo.provinceId = 355;
      });
    },
    loadCity(id) {
      subList(id).then(response => {
        this.cityList = response.data;
        var pro = this.cityList[0];
        this.loadArea(pro.id);
        this.shopInfo.cityId = pro.id;
      });
    },
    loadArea(id) {
      subList(id).then(response => {
        this.areaList = response.data;
        var area = this.areaList[0];
        this.loadStreet(area.id);
        this.shopInfo.areaId = area.id;
      });
    },
    loadStreet(id) {
      subList(id).then(response => {
        this.streetList = response.data;
        this.shopInfo.streetId = this.streetList[0].id;
      });
    },
    change() {},
    onCancel() {
      this.$router.go(-1);
    },

    handleUpdate(row) {
      getObj(row.id).then(response => {
        this.form = response.data;
        this.dialogFormVisible = true;
        this.dialogStatus = "update";
      });
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delObj(row.id).then(() => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
          const index = this.list.indexOf(row);
          this.list.splice(index, 1);
        });
      });
    },
    create(formName) {
      var shopParam = {
        shop: this.shopInfo
      };
      addOrUpdate(shopParam).then(resp => {
        this.dialogFormVisible = false;
        this.$notify({
          title: "成功",
          message: "创建成功",
          type: "success",
          duration: 2000
        });
      });
    },
    cancel(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    update(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false;
          this.form.password = undefined;
          putObj(this.form.id, this.form).then(() => {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
          });
        } else {
          return false;
        }
      });
    },
    resetTemp() {
      this.form = {
        username: undefined,
        name: undefined,
        sex: "男",
        password: undefined,
        description: undefined
      };
    }
  }
};
</script>
<style scoped>
.content-left {
  float: left;
}
.content-right {
  height: 100px;
  border: 1px solid #ff0000;
  float: left;
  margin-left: 20px;
}

.tip {
  padding: 8px 16px;
  background-color: #f5f5f5;
  border-left: 5px solid #42b983;
  margin: 20px 0;
  color: #757575;
}

.avatar {
  width: 180px;
  height: 180px;
}

 .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>